<template>
  <div>
    <div style="font-size: 20px; color: #333333;text-align: center;margin-top: -30px;margin-bottom: 30px;">
      充值保证金
    </div>
    <div style="padding: 0 20px">

      <el-input v-model="money" placeholder="请输入您想充值的保证金" class="inp" @input="(v) => (money = v.replace(/[^\d]/g, ''))">
        <div slot="append" style="color: #333333;font-size: 18px;">保证金</div>
      </el-input>
      <!-- <div style="margin: 20px 0;color: #000;font-size: 16px;">实际付款：{{Number(money * rate).toFixed(2)}} 元</div> -->

      <div class="fd1_tit">充值方式</div>
      <div>
        <el-radio-group v-model="fd1RG">
          <el-radio value="wx" :label="1">微信</el-radio>
          <!-- <el-radio value="zfb" :label="2" style="margin-left: 20px">支付宝</el-radio>
          <el-radio value="sy" :label="3" style="margin-left: 20px">我的收益</el-radio> -->
        </el-radio-group>
      </div>
      <div class="btnRR" @click="closeModal">立即充值</div>
    </div>

    <el-dialog :close-on-click-modal='false' :close-on-press-escape='false' :visible="visiblePay"
      @close="visiblePay = false" append-to-body width="30%">
      <div class="flex-column" style="padding-bottom: 30px">
        <div style="font-size: 30px; color: #3d3d3d">
          <template>微信支付</template>
        </div>
        <div style="
            font-size: 18px;
            color: #646464;
            margin-top: 11px;
            margin-bottom: 30px;
          ">
          使用微信扫描二维码完成支付
        </div>
        <div style="font-size: 18px; color: #646464; margin-bottom: 20px">
          支付金额：{{ Number(money * rate).toFixed(2) }}元
        </div>
        <div v-show="codeUrlShow">
          <VueQr v-if="codeUrl" :text="codeUrl" :margin="0" :size="200"></VueQr>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { showLoading, hideLoading } from "@/utils/Loading";

import VueQr from "vue-qr";
export default {
  name: "Recharge",
  components: {
    VueQr
  },
  props: {},
  data() {
    return {
      visiblePay: false,
      codeUrlShow: false,
      codeUrl: "123",
      fd1RG: 1,
      rechargeList: [{
        title: "微信",
      },
      {
        title: "支付宝",
      },
      {
        title: "我的收益",
      },
      ],
      money: "",
      rate: 0.1
    };
  },

  mounted() {
    let advertisementUserMes = JSON.parse(localStorage.getItem('advertisementUserMes'))
    // console.log('QQQQQQQQQQQQ',advertisementUserMes)
    this.rate = advertisementUserMes.rate
    // this.getAdvertisementUserMes()
  },

  watch: {
    visiblePay(nV, oV) {
      console.log(nV, oV);
      if (nV && this.codeUrlShow) {
        this.timer = null;
        this.timer = setInterval(() => {
          this.getAccountDetail();
        }, 1000);
      } else {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
  },
  computed: {

  },
  methods: {
    // async getAdvertisementUserMes() {
    //   let res = await this.$API.members.getAdvertisementUserMes({
    //     advertisementUserId:JSON.parse(localStorage.getItem('advertisementUserMes')).advertisementUserId
    //   })
    //   console.log('代理商信息', res)
    //   localStorage.setItem('advertisementUserMes',JSON.stringify(res.data))
    // },
    // 订单创建
    async createAccountDetailOrder() {
      showLoading()
      let resAdd = await this.$API.system.addAccountDetail({
        advertisementMoney: this.money,
        money: Number(this.money * this.rate).toFixed(2),
        type: 7,
        payMethod: '微信支付'
      });
      if (resAdd.code == 200) {
        this.accountDetailId = resAdd.data.accountDetailId
        let res = await this.$API.system.createAccountDetailOrder(
          {
            outTradeNo: resAdd.data.accountDetailId,
            totalFee: 0,
            body: ''
          }
        );
        if (res.code == 200) {
          console.log("微信支付", res.data.codeUrl);
          this.codeUrlShow = true;
          this.codeUrl = res.data.codeUrl;
          this.visiblePay = true;
          hideLoading()
        } else {
          hideLoading()
          this.$message.error(res.msg);
        }
      } else {
        hideLoading()
        this.$message.error("订单创建失败");
      }

    },

    async getAccountDetail() {
      let res = await this.$API.system.getAccountDetail({
        id: this.accountDetailId,
      });
      if (res.code == 200) {
        console.log("支付状态", res.data.status);
        if (res.data.status == 1) {
          this.$message.success("支付成功！");
          // this.getAdvertisementUserMes()
          this.$emit("successPay");
          clearInterval(this.timer);
          this.timer = null;
          setTimeout(() => {
            this.visiblePay = false;
          }, 3000);
        } else if (res.data.status == -1) {
          this.$message.error("支付失败！");
          clearInterval(this.timer);
          this.timer = null;
        }
      }
    },

    closeModal() {
      // this.$emit("closeModal")
      // this.visiblePay = true
      if (!this.money) {
        this.$message('请填写您想充值的保证金')
        return;
      }
      this.createAccountDetailOrder()


    }
  },
  created() { },
};
</script>
<style lang="scss" scoped>
.fd1_tit {
  font-size: 18px;
  color: #333333;
  margin: 20px 0;
}

.inp ::v-deep .el-input__inner {
  background: #EEEEEE;
  color: #000000;

  &::placeholder {
    font-size: 15px;
    color: #666666;
  }
}

.btnRR {
  margin-top: 40px;
  // width: 300px;
  width: 100%;
  height: 46px;
  border-radius: 5px;
  background: rgba(255, 104, 178, 0.698);

  font-size: 18px;
  color: #FFFFFF;

  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-column {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>
